﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>交付执行情况</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/tempoBI.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <link rel="stylesheet" href="../StaticFiles/layui/admin.css" />
  <link rel="stylesheet" href="../styles/pace.css" />
  <script type="text/javascript" src="../Scripts/pace.min.js"></script>
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="../Scripts/crypto-js.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: repeat-y;
    }

    #header {
      height: 60px;
      background-image: url(../images/抬头.png);
      background-size: 100% 60px;
      background-repeat: no-repeat;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 28px;
      line-height: 60px;
    }

    #title {
      color: #fff;
      font-family: '微软雅黑';
      font-size: 20px;
      font-weight: bold;
      height: 32px;
      line-height: 32px;
    }

    .layui-card {
      background-color: transparent;
    }

    .layui-card-header {
      color: #fff;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    .layui-table {
      background-color: transparent !important;
    }

    .layui-table-view {
      margin-top: 0px;
    }


    .layui-table tr:hover,
    .layui-table-header,
    .layui-table thead tr {
      background-color: transparent !important;
    }

    .layui-laypage a,
    .layui-laypage span,
    .layui-laypage .layui-laypage-skip {
      color: #fff;
    }

    .layui-btn {
      vertical-align: top;
    }

    .lable {
      display: inline-block;
      color: #fff;
      font-size: 20px;
      height: 30px;
      line-height: 30px;
      font-weight: bold;
    }

    /*表格标题*/
    .layui-table-header .layui-table-cell {
      color: #FFF;
      font-size: 20px;
      font-family: "微软雅黑";
      font-weight: bold;
      margin: 0px 0px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }

    /*表格单元格*/
    .layui-table-cell {
      color: #FFF;
      font-size: 16px;
      font-family: '微软雅黑';
      margin: 0px 0px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }

    .layui-table td,
    .layui-table th,
    .layui-table-col-set,
    .layui-table-fixed-r,
    .layui-table-grid-down,
    .layui-table-header,
    .layui-table-page,
    .layui-table-tips-main,
    .layui-table-tool,
    .layui-table-total,
    .layui-table-view,
    .layui-table[lay-skin=line],
    .layui-table[lay-skin=row] {
      border-color: #808080;
    }
  </style>
</head>

<body>
  <div class="layui-row" style="padding: 0 15px;">
    <div class="layui-col-md12">
      <div id="header">
      </div>
    </div>
  </div>

  <div class="layui-row" style="padding: 0 15px;">
    <div class="layui-col-md12" style="margin-top:-30px;position:absolute;top:100px;left:15px;z-index:9999;">
      <div style="height:30px;">
        <span class="lable" style="color:#3cb0ff;">本年总计划数:</span>
        <span class="lable" style="color:#3cb0ff;margin-right:20px;" id="total"></span>
        <span class="lable" style="color:#00ff00;">本年已完工数:</span>
        <span class="lable" style="color:#00ff00;margin-right:20px;" id="finished"></span>
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="weekPlan" style="font-size:16px;">
          <i class="layui-icon" style="font-weight: bold;">&#xe64c;</i>批产周计划
        </button>
      </div>
    </div>
  </div>

  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">
          <img src="../images/问题总数.png" height="30" alt="" />
          <span class="type"></span>本月完成情况
        </div>
        <div class="layui-card-body">
          <table id="grid">
          </table>
        </div>
      </div>
    </div>
  </div>

  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script type="text/javascript">
    $(function () {

      $(".layui-card:last-child").css({ "marginBottom": "0px" });
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
      };
      var $factoryid = getUrlParam('factoryid');

      //加密方法
      function Encrypt(source) {
        var key = CryptoJS.enc.Utf8.parse("12345678900000001234567890000000"); //32位
        var iv = CryptoJS.enc.Utf8.parse("1234567890000000"); //16位
        var srcs = CryptoJS.enc.Utf8.parse(source);
        var encrypted = CryptoJS.AES.encrypt(srcs, key, {
          iv: iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7
        });
        return encrypted.ciphertext.toString();
      }

      //解密方法
      function Decrypt(source) {
        var key = CryptoJS.enc.Utf8.parse("12345678900000001234567890000000"); //32位
        var iv = CryptoJS.enc.Utf8.parse("1234567890000000"); //16位
        var encryptedHexStr = CryptoJS.enc.Hex.parse(source);
        var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
        var decrypt = CryptoJS.AES.decrypt(srcs, key, {
          iv: iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7
        });
        var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
        return decryptedStr.toString();
      }

      $("#header").text(Decrypt(layui.url().search.type) + '交付');
      $(".type").text(Decrypt(layui.url().search.type));

      var ordertypename = "";

      if (Decrypt(layui.url().search.type) === '批产') {
        ordertypename = 'GetPiChan';
        document.title = "批产交付";
      } else if (Decrypt(layui.url().search.type) === '新机') {
        document.title = "新机交付";
        ordertypename = 'GetXinJi';
      } else {
        document.title = "检修交付";
        ordertypename = 'GetJianXiu';
      }

      $("#weekPlan").click(function () {
        window.open('http://10.15.7.24/mesreport/Kanban/ZSWeekPlanInfoLookBoard.html', '_blank');
      });

      layui.use(['layer', 'table'], function () {
        var table = layui.table;
        var layer = layui.layer;

        //D指标交付完成情况明细数据
        function GetDeliveryDetail() {
          table.render({
            elem: '#grid'
            , url: '../handler/board/ZSDeliveryDetail.ashx'
            , method: 'POST'
            , page: false
            , cols: [[
              { type: 'numbers', title: '序号', width: 80 }
              , { field: 'PLANMONTH', title: '月份' }
              , { field: 'ORDERTYPENAME', title: '订单类型' }
              , { field: 'MFGORDERNAME', title: '订单号' }
              , { field: 'ATTRIBUTEVALUE', title: '发动机号' }
              , {
                field: 'ISFINISHED', title: '完工状态',
                templet: function (d) {
                  if (d.ISFINISHED === '已完工') {
                    return '<span style="background:#00ff00;color:#000;padding:5px 10px;border:1px solid #00ff00;border-radius:3px;">' + d.ISFINISHED + '</span>';
                  } else {
                    return '<span style="background:#ff0000;color:#fff;padding:5px 10px;border:1px solid #ff0000;border-radius:3px;">' + d.ISFINISHED + '</span>';
                  }
                }
              }
              , {
                field: 'FINISHDATE', title: '完工时间',
                templet: function (d) {
                  if (d.FINISHDATE !== null) {
                    return d.FINISHDATE.split('T')[0];
                  } else {
                    return "";
                  }
                }
              }
            ]]
            , where: {
              type: ordertypename
            }
            , text: {
              none: '暂无相关数据'
            }
            , request: {
              pageName: 'page', //页码的参数名称，默认：page
              limitName: 'rows' //每页数据量的参数名，默认：limit
            }
            , page: {
              theme: '#009688'
            }
            , limit: 15
            , limits: [15, 30, 50]
          });
        };
        GetDeliveryDetail();

        function GetYearTotalData() {
          $.ajax({
            type: "POST",
            url: "../handler/board/ZSDeliveryDetail.ashx",
            dataType: "text",
            cashe: false,
            data: {
              type: 'GetTotal',
              ordertypename: ordertypename
            },
            success: function (result) {
              var data = JSON.parse(result);
              $("#total").text(data[0]["PLANQTY"] + '台');
              $("#finished").text(data[0]["FINISHQTY"] + '台');
            }
          });
        }
        GetYearTotalData();
      });
    });
  </script>
</body>

</html>